<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set scope="request" var="stitle" value="文章编辑" />
<jsp:include page="include/menu.jsp" />


<link rel="stylesheet" href="${url }/admin//makedown/css/editormd.css" />

<script src="${url}/admin/makedown/js/editormd.js"></script>
<script src="${url}/admin/makedown/js/to-makedown.js"></script>
<script type="text/javascript">
            var testEditor;
            
            $(function() {
                
                
                    testEditor = editormd("editormd", {
                        width: "100%",
                        height: 740,
                        path : '${url}/admin/makedown/lib/',
                        codeFold : true,
                        appendMarkdown :downshow($("#content").val()),
                        saveHTMLToTextarea : true,    // 保存HTML到Textarea
                        searchReplace : true,
                        //watch : false,                // 关闭实时预览
                        htmlDecode : "style,script,iframe,pre",            // 开启HTML标签解析，为了安全性，默认不开启    
                        //toolbar  : false,             //关闭工具栏
                        //previewCodeHighlight : false, // 关闭预览HTML的代码块高亮，默认开启
                        emoji : true,
                        taskList : true,
                        tocm            : true,         // Using [TOCM]
                        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                        flowChart : true,             // 开启流程图支持，默认关闭
                        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                        imageUpload : true,
                        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL : "${url}/admin/log/upload",
                        onload : function() {
                            console.log('onload', this);
                            //this.fullscreen();
                            //this.unwatch();
                            //this.watch().fullscreen();

                            //this.setMarkdown("#PHP");
                            //this.width("100%");
                            //this.height(480);
                            //this.resize("100%", 640);
                        }
                    });
                    $(".editormd-html-textarea").removeAttr("name");
                    $(".editormd-markdown-textarea").removeAttr("name");
                });
        </script>
<script type="text/javascript">
	function preview() {
		$(function(){
			$("#content").text(testEditor.getPreviewedHTML());
		});
		//window.open('${url }/admin/log/preview');
		//location="${url }/admin/log/preview";
		document.getElementById("addorPre").submit();
		return false;
	}
</script>
<script type="text/javascript">
	
	$(function(){
		
		function autoSave(){
			$("#content").text(testEditor.getPreviewedHTML());
			$.post('${url}/admin/log/addToSession',$('#addorPre').serialize(),function(data){
				if(data.add){
					$("#msg").text("自动保存成功 "+new Date());
				}
			});
		}
		setInterval(autoSave,10000*6); 
		
		var $tags=$("#inp");
		$(".tag").click(function(e){
			$tags.val($tags.val()+$(this).text()+",");
			$(this).remove();
			e.preventDefault();
		});
		$("#translate").click(function(){
			$.post('<%=request.getAttribute("url")%>/post/api/translate',
											{
												"key" : $("#title").val()
											},
											function(data) {
												var d = $.parseJSON(data);
												if ($("#result").length == 0) {
													$("#translate")
															.after(
																	"<input name='alias' id='result' value='"+d.translate+"'>");
												} else {
													$("#result").attr("value",
															d.translate);
												}
											});
						});

		$("#add").click(
				function() {

					$.post('${url}/admin/log/add', $('#addorPre').serialize(),
							function(data) {
								if (data.add) {
									alert("发表成功");
								}
							});
				});

	});
</script>
<div class="page-content">
	<div class="page-header">
		<h1>
			文章 <small> <i class="icon-double-angle-right"></i> 撰写文章
			</small>
		</h1>
	</div>
	<!-- /.page-header -->
	<div id="msg" class="alert alert-block alert-success"></div>
	<form target="_blank" class="form-horizontal" role="form" id="addorPre"
		method="post" action="${url }/admin/log/preview">
		<textarea style="display: none;" name="content" id="content">${session.log.content}</textarea>
		<input name="title" id="title" size="60" maxlength="60"
			value="${session.log.title}" class="col-xs-10 col-sm-5" type="text"
			placeholder="请输入文章标题"></input>
		<div class="col-xs-3">
			<select name="typeId" id="form-field-select-3" class="form-control">
				<c:forEach items="${init.types}" var="type">
					<option
						<c:if test="${type.id eq session.log.typeId}">selected="selected"</c:if>
						value="${type.id}">${type.typeName}</option>
				</c:forEach>
			</select>
		</div>
		<hr>
		<div id="editormd"></div>

		<hr />


		<input value="${session.log.keywords}" name="keywords" id="inp"
			size="60" maxlength="60" />
		<hr />
		<div class="tags" style="width: 100%">
			<c:forEach items="${init.tags}" var="tags">
				<span class="tag">${tags.text}</span>
			</c:forEach>
		</div>
		<hr />
		<div class="col-xs-3">
			<label> <input class="ace ace-switch ace-switch-6"
				type="checkbox" checked="checked" name="canComment"> <span
				class="lbl">&nbsp;能发布评论吗</span>
			</label>

		</div>
		<div class="col-xs-3">
			<label> <input class="ace ace-switch ace-switch-6"
				type="checkbox" name="recommended"> <span class="lbl">&nbsp;推荐吗</span>
			</label>
		</div>
		<br/>
		<hr>
		<div class="widget-box collapsed">
			<div class="widget-header widget-header-small  header-color-blue">
					 
				<div class="widget-toolbar inline">
					<a data-action="collapse" href="#"> <i class="icon-chevron-down"></i>
					</a>
				</div>
			</div>

			<div class="widget-body">
				<div class="widget-body-inner" style="display: none;">
						<textarea name="digest" cols="100" rows="8" id="digest"
			style="width:100%; height:180x; z-index: 9999;">${session.log.digest}</textarea>

				</div>
			</div>
		</div>
		
		<div class="clearfix form-actions">
			<div class="col-md-offset-3 col-md-9">
				<button class="btn btn-info" id="add" type="button">
					<i class="icon-ok bigger-110"></i> 提 交
				</button>

				&nbsp; &nbsp; &nbsp;
				<button class="btn" type="button" onClick="preview()">
					<i class="icon-undo bigger-110"></i> 预览
				</button>
			</div>
		</div>
	</form>

	<jsp:include page="include/footer.jsp" />